<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="./echarts.min.js"></script>
<script type="text/javascript">
            var dom =document.getElementById("container");
            var myChart =echarts.init(dom);
            var app ={};
            myChart.showLoading();
            function loadEcharts(option){
                myChart.hideLoading();
                if (option &&typeof option ==="object") {
                    if(option.series[0].type==="bar"){
                       option.series[0].itemStyle.normal.color=getColor;
                    }
                    myChart.setOption(option,true);
                  if(option.title.text&&option.title.text==="reader"){
                      myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 1});
                  }
                }
            }
            function getColor(params){
                var colorList = ["#3FB1E3","#626C91","#6BE6C1","#A0A7E6","#C4EBAD","#96DEE8"];
                return colorList[params.dataIndex];
            }
        </script>
</body>
</html>